Patrones de Diseño Responsive

Author: Raul Lopez
Category: Fundamentos
Elapsed time: 3 months ago
Published: 6/11/2025
Description: En este post exploramos todos los aspectos del diseño responsivo con la finalidad de aprender a crear sitios web con un diseños atractivo y funcional para todos, utilizando las bases correctas del web responsive. Para mas informacion puedes consultar:` https://web.dev/learn/design `

En este tema exploraremos por qué el diseño optimizado para móviles es esencial hoy en día. Antes de continuar, asegúrate de contar con una base sólida en CSS.

Si aún no dominas CSS, consulta mi Guía Definitiva de CSS para aprender los conceptos más importantes.

¿Qué es Responsive Design?

El responsive design permite que los sitios web “se adapten” a diferentes tamaños de pantalla sin comprometer la usabilidad y la experiencia del usuario. El texto, los elementos de la interfaz de usuario y las imágenes se redimensionan y cambian de tamaño según la ventana gráfica. El responsive design permite a los desarrolladores escribir un solo conjunto de código HTML, CSS y JavaScript para múltiples dispositivos, plataformas y navegadores.

Estrategias Mobile First

¿Qué necesitamos conocer para poder trabajar con responsive design?

  • Media queries
  • Breakpoints

¿Qué son los Breakpoints?

Es el “punto” en el que el contenido y el diseño de un sitio web se adaptarán de cierta manera para brindar la mejor experiencia de usuario posible. Básicamente, los breakpoints son valores de píxeles que un desarrollador / diseñador puede definir en CSS. Cuando un sitio responsive alcanza esos valores de píxeles, se produce una transformación para que el sitio web ofrezca una experiencia de usuario óptima.

¿Qué son los Media queries?

Es el elemento de CSS que usamos para crear los breakpoints y especificar los cambios que sufrirá el producto/proyecto en los diferentes tamaños de pantalla.

Sintaxis:

@media (min-width: 480px) {
  /* estilos para pantallas >= 480px */
}

Como vemos, usamos la propiedad min-width para especificar el ancho mínimo en el que se aplicarán los estilos del interior.

¿Cuáles son las medidas que debemos usar para las pantallas de smartphone, tablets y laptops/desktop?

  • Smartphone: 480px
  • Tablets: 768px
  • Laptop/Desktop: 1024px

¿Qué metodología debemos de usar hoy en día con Responsive Design?

Mobile First / only

¿Qué es Mobile first/only?

Es una metodología de desarrollo que nos dice que, al empezar a desarrollar un producto/proyecto, debemos comenzar siempre desde el tamaño de smartphone y desde ahí escalar el proyecto a pantallas más grandes.

¿Por qué debemos escribir los Media queries partiendo desde el tamaño más pequeño hasta el más grande?

Porque, debido al algoritmo de cascada de CSS, si los definimos en orden inverso los estilos no se aplican correctamente.

Además, hoy en día la mayor parte del contenido en Internet se consume desde dispositivos móviles. Por eso es fundamental adoptar una metodología mobile-first: diseñar primero pensando en pantallas pequeñas y luego escalar a tabletas y escritorios. Empezar al revés (desktop-first) y luego adaptar a móvil, aunque sea responsive design, no aprovecha las particularidades ni las limitaciones propias de los dispositivos móviles desde el inicio.

¿De qué formas podemos aplicar los Media Queries en nuestros proyectos?

  • Incluirlos en el archivo CSS principal
  • Incluir varios archivos CSS en la etiqueta <head> y activarlos vía atributo media

¿Cuál es la mejor forma de implementar los Media queries en nuestros proyectos y por qué?

Usando un archivo CSS específico para cada tamaño de pantalla, de modo que el usuario descargue solo el CSS que necesita en ese momento.

Sintaxis:

<link rel="stylesheet" href="./tablets.css" media="screen and (min-width: 720px)">

Nota: Una buena práctica es separar los estilos para cada tamaño de pantalla (phone.css, tablet.css, desktop.css) y manejar los estilos para cada uno.

Concepto Importante:

Viewport: área visible del navegador Portrait: vertical Landscape: horizontal Mobile first: empezar un websit desde la menor resolución soportada Deskto first: empezar un websit desde la mayor resolución soportada ¿Cúal es mejor?: Técnicamente Mobile First

Patrones de diseño Responsive: Mobile First a Desktop

Existen numerosos patrones de diseño, pero tres de ellos son especialmente populares y recomendables para nuestros proyectos.

1. Patrón Mostly Fluid

Este patrón propone una adaptación progresiva según el dispositivo:

  • Primero, diseñamos la interfaz en columnas.
  • Después, en tablets en posición vertical (p. ej. iPad), redistribuimos las columnas según necesidad; el encabezado puede mantenerse al 100 % de ancho.
  • A continuación, en tablets en posición horizontal, rotamos y reorganizamos el contenido para aprovechar mejor el espacio.
  • Por último, optimizamos el diseño para la versión web en pantallas de escritorio.

Ejercicio Instrucciones
1. Crea cinco cajas con distintos colores de fondo.
2. En cada hoja de estilos (una por breakpoint) establece que las cajas: – Ocupen el 100 % del ancho de la pantalla.
– Estén apiladas en columnas en vista móvil.
3. Define tres media queries (p. ej. min-width: 576 px, 768 px y 992 px). En cada una, cambia la disposición de las cajas (por ejemplo: de columna a fila, con diferente número de columnas o márgenes).
4. Al terminar, abre las DevTools de tu navegador y, en la pestaña «Network» o «Sources», confirma que se están cargando las tres hojas de estilos correspondientes a cada breakpoint.

Nota: Los media querys siempre tienen que estar declarados al final de la pagina de css.

2. Patrón Layout Shifter

¿Qué es el patrón Layout Shifter en diseño web Mobile First?

El diseño web Mobile First es una metodología que prioriza la experiencia del usuario en dispositivos móviles. Uno de los patrones que podemos utilizar en este enfoque es el Layout Shifter, que permite que, al aumentar el tamaño de la pantalla, los bloques o contenedores se reposicionen y ofrezcan un diseño adaptativo.

A continuación, te explico cómo construirlo utilizando HTML y CSS.

¿Cómo construir un Layout Shifter con HTML y CSS?

Para implementar un Layout Shifter, empezamos con una estructura básica en HTML y usamos CSS flexbox para reposicionar elementos según cambie el tamaño de pantalla.

Paso 1: Estructura básica en HTML

  • Utiliza una etiqueta <main> como contenedor principal.
  • Añade varios <div> dentro de <main>, algunos de los cuales serán contenedores de otros contenedores.
  • Asigna a cada <div> una clase para manipularlo con CSS.
<main>
  <div class="container c1"></div>
  <div class="container c4">
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
  <div class="container c5"></div>
</main>

Paso 2: Estilos CSS básicos

  • Aplica display: flex al contenedor principal.
  • Utiliza flex-wrap: wrap para permitir que los elementos se reubiquen.
  • Configura alturas y anchos automáticos para garantizar la adaptabilidad.
.container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  height: 150px; /* Ajusta según sea necesario */
  flex: 1;
}

¿Cómo implementar Media Queries para cambios de diseño?

Las Media Queries permiten ajustar el diseño cuando se detecta un ancho de pantalla específico. A continuación, dos ejemplos de breakpoints comunes:

Primer breakpoint – 600 px

Cambia el ancho de los contenedores para pantallas de tablet en vertical:

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }
  .c4 {
    width: 75%;
  }
  .c5 {
    width: 100%;
  }
}

Segundo breakpoint – 800 px

Limita el ancho del contenedor principal y centra la estructura:

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin: 0 auto;
  }
  .c1 {
    width: 50px;
    order: 1;
  }
  .c4 {
    width: 100px;
  }
  .c5 {
    width: 50px;
    order: 2;
  }
}

¿Cómo aprovechar este patrón en proyectos reales?

El patrón Layout Shifter ofrece flexibilidad y un diseño adaptativo eficaz en todo tipo de dispositivos. Con HTML, CSS y Media Queries adecuados, lograrás transiciones fluidas entre distintos breakpoints.

Consejos y recomendaciones:

  • Añade más contenedores y experimenta con su posición según cada breakpoint.
  • Incorpora texto, imágenes o vídeos para un diseño más realista.
  • Crea layouts únicos que optimicen la experiencia tanto en móviles como en escritorio.

¿Qué es el patrón de diseño “column drop” en responsive design?

En el diseño web es crucial que nuestras páginas se adapten correctamente a diferentes tamaños de pantalla. El patrón de diseño column drop es una técnica que nos ayuda a lograr una transición fluida desde un diseño móvil hasta uno de escritorio. Este enfoque reorganiza los contenedores al aumentar el tamaño del viewport, posicionando primero las columnas de manera vertical y luego distribuyéndolas horizontalmente según la necesidad del contenido.

3.- Tercer Patrón column drop

¿Cómo se implementa el column drop en CSS?

La implementación del patrón column drop en CSS es sencilla y efectiva, utilizando contenedores flexibles para cambiar la orientación de sus elementos a medida que el tamaño de la pantalla varía.

HTML inicial

<div class="container">
  <div class="c1">Contenido 1</div>
  <div class="c2">Contenido 2</div>
  <div class="c3">Contenido 3</div>
  <div class="c4">Contenido 4</div>
  <div class="c5">Contenido 5</div>
</div>

Paso a paso para aplicar el patrón

1. Configuración inicial en CSS

.container {
  display: flex;
  flex-direction: column;
  /* Otros estilos generales */
}

.container div {
  background-color: /* color específico para cada div */;
  /* Otros estilos para visualización */
}

2. Definiendo los breakpoints

/* A partir de 600px de ancho */
@media (min-width: 600px) {
  .c1 { width: 25%; order: 1; }
  .c2 { width: 75%; order: 2; }
  .c3, .c4, .c5 { width: 100%; order: 3, 4, 5; }
}

/* A partir de 800px de ancho */
@media (min-width: 800px) {
  .container {
    /* Ajustes para contenedor sin limitación de ancho */
  }
  .c1 { width: 30%; }
  .c2 { width: 40%; }
  .c3 { width: 30%; }
  .c4,
  .c5 {
    width: 50%;
  }
}

Efecto del patrón durante el uso

Con el CSS configurado:

  1. En móvil (pantallas pequeñas), todos los elementos se muestran en una sola columna vertical.
  2. Al superar los 600 px, algunos contenedores “suben” a una segunda línea, ajustando su ancho según lo definido.
  3. Al sobrepasar los 800 px, la distribución se optimiza para aprovechar todo el ancho disponible y ofrecer un layout más equilibrado.

Consejos para aplicar el column drop en tus proyectos

  • Haz pruebas en múltiples dispositivos: Asegúrate de que tu diseño responda correctamente en móviles, tablets y pantallas de escritorio.
  • Combina con otras tecnologías: CSS suele ser suficiente, pero puedes incorporar JavaScript para manejar interacciones más complejas o contenido dinámico.
  • Considera los aspectos visuales: Cuando reposiciones elementos que contienen imágenes o multimedia, verifica que su calidad y proporciones se mantengan adecuadas.

¿Cuáles son las mejores prácticas para la carga rápida de proyectos en Mobile First?

Cuando optimizas un proyecto siguiendo el enfoque Mobile First, es esencial garantizar que la página cargue rápido y de manera eficiente. A continuación, algunos consejos clave:

  • Divide el código CSS
    No cargues todas las media queries en un único archivo. Separa tus breakpoints en distintos archivos CSS y cárgalos de forma selectiva para reducir el peso inicial.

  • Utiliza un archivo CSS dedicado al móvil
    Crea un archivo base (por ejemplo, style.css o mobile.css) que contenga únicamente lo esencial para el diseño en móvil.

  • Selecciona los breakpoints adecuados
    En lugar de cubrir todos los dispositivos, céntrate en los anchos más comunes:

    • 320 px (móviles pequeños)
    • 375 px y 414 px (móviles estándar)

¿Cómo identificar dimensiones importantes para breakpoints?

Elegir los breakpoints correctos es vital para un diseño fluido. Puedes usar herramientas como mydevice.io para consultar los viewports de diferentes dispositivos:

  • Ancho mínimo móvil: 320 px
  • Tablets: 768 px y 800 px

No necesitas más de 3–4 breakpoints; así mantendrás tu CSS limpio y fácil de mantener.

¿Cómo implementan grandes compañías el diseño responsive?

Analizar casos reales nos ayuda a entender buenas prácticas:

  1. Patrón Fluid Layout – Dropbox
    Todo el contenido comienza al 100 % de ancho en vertical y, al crecer el viewport, ciertos contenedores limitan su ancho para ajustar el contenido de forma fluida.

  2. Patrón Layout Shifter – GitHub
    En móviles el menú y los elementos clave (por ejemplo, el formulario de registro) cambian de posición según el ancho de pantalla, reorganizando el contenido de forma óptima.

  3. Patrón Column Drop – Smashing Magazine
    El layout pasa de tres columnas a dos y, finalmente, a una sola columna conforme se reduce el ancho. En su implementación utilizan CSS Grid Layout para gestionar estos saltos de columna.

¿Qué otros patrones podemos encontrar en la web? Además de los patrones comunes discutidos, existen otros enfoques que puedes encontrar al explorar la web. Dribbble, por ejemplo, implementa un diseño en cuadrícula que se ajusta al tamaño del dispositivo. Este tipo de diseño es similar al utilizado por plataformas como Instagram o Pinterest y se logra utilizando CSS Grid Layout.

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Ejemplo incorrecto

Se inserta la imagen sin adaptarla al ancho de la pantalla ni ofrecer versiones optimizadas:

<div>
  <img src="../../img.jpg" alt="Descripción de la imagen">
</div>
  • La misma imagen se carga en todos los dispositivos, consumiendo más ancho de banda del necesario.
  • No hay control sobre resolución ni tamaño.

Ejemplo recomendado

Con <picture> y varias fuentes (<source>) servimos distintas versiones según el ancho del viewport. Además, podemos añadir atributos como loading="lazy" para mejorar la carga:

<picture>
  <source
    srcset="images/amazon_huge-icon.png"
    media="(min-width: 1000px)">
  <source
    srcset="images/amazon_big-icon.png"
    media="(min-width: 600px)">
  <img
    src="images/amazon_small-icon.png"
    alt="Icono de Amazon"
    loading="lazy">
</picture>
  • <source> superior: se aplica cuando el ancho es ≥ 1000 px.
  • <source> intermedio: se aplica cuando el ancho es ≥ 600 px.
  • <img> final: versión por defecto (menor a 600 px).
  • loading="lazy" retrasa la carga hasta que la imagen esté cerca del viewport.

Para terminar recordemos que la propiedad width:100% Es nuestro mejor amigo!

Explore Other Posts

Accesibilidad Web

Este es un pequeño vistazo a la accesibilidad dentro de nues...

Fundamentos de CSS

Todo lo esencial para aprender CSS

Introducción a Conceptos Básicos de C#

Aprende los fundamentos de C# con esta guía introductoria qu...

Follow Me

Raul Dev